import React, { useEffect, RefObject, useState, useRef } from "react";
// antd-ui组件
import {  Radio } from "antd-mobile";
// antd-ui组件
import { Form, Input, Button, Toast } from "antd-mobile";
type Props = {}

// 路由
import { useNavigate, useLocation} from "react-router-dom";

// 用于微信请求
import wxfetch from "../../utils/wxfetch";

// 后端接口
import { ApiSendCaptcha, ApiRegister,ApiMemberUpdate, ApiCheckLogin, ApiLogout } from "@/utils/api";

// 导入仓库
import {  myUserToken,changeUser, changeUserToken, changeWxInfo, changeOpenid, phoneOpenid, myWxInfo } from "@/store/userSlice";

// 导入带有类型的属性，方法 1.
import { useAppDispatch, useAppSelector } from "../../hooks";
// 加密解密
import crypt from "@/utils/crypto";
import { isReadable } from "stream";


export default function register({}: Props) {
  // 表单更新
  const [form] = Form.useForm();

  // 导入仓库 2.使用属性
  const UserToken = useAppSelector(myUserToken);
  // 导入仓库 2.使用方法
  const dispatch = useAppDispatch();
  const myOpenid = useAppSelector(phoneOpenid);
  const WxInfo = useAppSelector(myWxInfo);

  // 路由跳转
  const navigate = useNavigate();
  // 获取路由参数code
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const code = searchParams.get("code");

  // 用户手机号等
  const [formData, setFormData] = useState({
    name: "",
    sex: 0,
    birthday: null,
    mobile: "",
    captcha: "",
    plate_number: "",
  });
  // 验证码
  const [sendCode, setSendCode] = useState(false);
  // 禁止重发发送
  const [cooldown, setCooldown] = useState(false);

  const [num, setNum] = useState(5);
  // 更新
  const [isUpdate, setIsUpdate] = useState(false);

  // 检查并登录的member_id
  const [member_id, setMember_id] = useState(-1);
  const [openid, setOpenid] = useState("");

  // 获取路由code
  const getCode = () => {
    // 携带路由参数
    if (code) {
      // 获取accessToken
      // localStorage.clear()
      isRegister(code);
      //   否则回注册页
    } else if (!code) {
      console.log("未携带code访问");
      pushRegister();
    }
  };

  // 解密accessToken 检测是否有token,并检查过期
  const checkUserToken = () => {
    // 检查是否存在已加密的用户令牌信息在 localStorage 中
    const encryptedUserToken = localStorage.getItem("encryptedUserToken");

    if (encryptedUserToken) {
      // 用户已登录，解密用户令牌并执行相应逻辑
      const decryptedUserToken = crypt.decrypt(encryptedUserToken);
      // console.log("解密的 user_token:", decryptedUserToken);
      // 执行其他逻辑，如设置用户状态、重定向等
      return decryptedUserToken;
    }
    return false;
  };

  // 是否有微信用户信息
  const encryptedWxInfo = localStorage.getItem("encryptedWxInfo");
  // 是否有填写用户信息
  const encryptedUserInfo = localStorage.getItem("encryptedUserInfo");

  // 是否注册
  const isRegister = async (code: string) => {
    // 1.是否有accessToken
    const encryptedUserToken = checkUserToken();
    // 没有accessToken,请求accessToken
    if (!encryptedUserToken) {
      // 获取accessToken
      const data = await wxfetch.getAccessTokenFn(code);
      // 请求失败
      if (data.errcode) {
        // 重新获取
        console.log("code过期");
        // 返回注册页
        pushRegister();
      } else {
        // 未注册
        // 获取成功access_token
        // 3.1存access_token的openid到仓库,用于后续获取会员信息
        dispatch(changeUserToken(data));
        // 存本地
        // 加密
        // handleUserTokenEncryption("encryptedUserToken", data);
        // 3.2是否已注册，已注册前往home
        await checkLogin(data.openid);
        // 3.3帮助用户获取用户信息
        await getUserInfo(data.access_token, data.openid);

        return;
      }
    } else {
      // 有accessToken
      // 是否过期
      let isTime = false;
      if (encryptedUserToken) {
        isTime = checkTime(encryptedUserToken);
      }
      // 过期
      if (isTime) {
        localStorage.removeItem("encryptedUserToken");
      } else {
        // 未过期
      }
    }
  };

  const isTime = async (code: string) => {
    const encryptedUserToken = checkUserToken();
    // 2.获取用户信息
    // 是否有注册用户信息
    // 是否有效期
    let isTime = false;
    if (encryptedUserToken) {
      // 是否已注册，有用户信息
      // 有注册用户信息，判断是否过期
      isTime = checkTime(encryptedUserToken);
    }
    // 有注册用户信息,有access_token，是否过期
    if (isTime) {
      // 有access_token 未过期
      navigate("/home");
      return;
    } else {
      // // 过期，重新请求
      localStorage.removeItem("encryptedUserToken");
      // // 注册页
      navigate("/");
    }

    // 没有access_token
    if (!encryptedUserToken) {
      // 获取accessToken
      const data = await wxfetch.getAccessTokenFn(code);
      // // 真实地址 获取成功
      // if ("openid" in data) {
      //   // 检查登录
      //   const res = await ApiCheckLogin(data.openid);
      //   if(res.data.member_id){
      //     // 存到仓库
      //     // 存到本地
      //     navigate('/home')
      //   }
      // }
      // 获取失败
      if (data.errcode) {
        // 重新获取
        console.log("code过期");
        // 返回注册页
        pushRegister();
        return;
      } else {
        // 获取成功access_token
        // 用户测试阶段
        // 加密
        handleUserTokenEncryption("encryptedUserToken", data);
        // 存access_token的openid到仓库,用于后续获取会员信息
        dispatch(changeUserToken(data));
        // 获取用户信息
        await getUserInfo(data.access_token, data.openid);
        // console.log(UserToken, "UserToken");
        // 重新获取accessToken,但已注册
        if (encryptedUserInfo) {
          console.log(111);
          navigate("/home");
        }
      }
      return;
    }
  };
  // 判断openid判断
  const checkLogin = async (openid: string) => {
    console.log(openid);
    dispatch(changeOpenid(openid));
    handleUserTokenEncryption("phoneOpenid", {
      openid: openid,
    });
    const res = await ApiCheckLogin(openid);
    if (res.code == 0) {
      // 当前页面使用
      setMember_id(res.data.member_id);
      navigate("/home");
      // await getMemberInfo(res.data.member_id);
      return res.data.member_id;
    } else {
      console.log("未登录");
      return false;
    }
  };

  // 获取accessToken
  const getAccess = async (code: string) => {
    const data = await wxfetch.getAccessTokenFn(code);
    // 获取失败
    if (data.errcode) {
      // 重新获取
      console.log("code过期");
      // 返回注册页
      pushRegister();
    } else {
      // 获取成功access_token
      // 用户测试阶段
      // 加密
      handleUserTokenEncryption("encryptedUserToken", data);
      // 存access_token的openid到仓库,用于后续获取会员信息
      dispatch(changeUserToken(data));
      // 获取用户信息
      // await getUserInfo(data.access_token, data.openid);
      // console.log(UserToken, "UserToken");
      // 重新获取accessToken,但已注册
      // if (encryptedUserInfo) {
      //   console.log(111);
      //   navigate("/home");
      // }
    }
  };

  // 去到注册页;
  const pushRegister = () => {
    // window.location.href = 'http://mfmaef89.beesnat.com/';
    navigate("/");
  };

  // 加密UserToken
  const handleUserTokenEncryption = (name: string, userToken: object) => {
    // 在存储到 localStorage 之前加密用户令牌
    const encryptedUserToken = crypt.encrypt({
      ...userToken,
      createdTime: Date.now(),
    });
    localStorage.removeItem(name);
    localStorage.setItem(name, encryptedUserToken);
    return encryptedUserToken;
  };

  // 判断是否在有效期内，后期后端做
  const isTokenValid = (encryptedUserToken: any) => {
    const currentTime = Math.floor(Date.now() / 1000); // 当前时间戳（秒）
    console.log(encryptedUserToken, "encryptedUserToken");
    // console.log(currentTime, "currentTime");
    const expirationTime = 7200 + encryptedUserToken.createdTime; // 过期时间戳
    // console.log(expirationTime, "expirationTime");
    return currentTime < expirationTime;
  };
  // 校验access_token是否过期
  const checkTime = (encryptedUserToken: any) => {
    // 获取本地时间
    const isTime = isTokenValid(encryptedUserToken);
    // 有效期内
    if (isTime) {
      console.log("有效期内");
      // console.log(UserToken, "UserToken");
      return true;
    } else {
      // 重新获取
      console.log("重新获取");
      return false;
    }
  };
  // 获取微信userInfo
  const getUserInfo = async (access_token: string, openid: string) => {
    // 校验是否有openid和session_member_id
    if (!openid) {
      console.log("没有获取openid或没有校验登录");
      console.log("openid", openid);
      // pushRegister()
      return;
    }
    const data = await wxfetch.getUserInfoFn(access_token, openid);
    // console.log(encryptedWxInfo, "加密access_token");
    if ("openid" in data) {
      // 检查登录
      // checkLogin();
      // 渲染用户信息
      await deterName(data);
      // 存到仓库
      changeWxInfo(data);
      changeOpenid(data.openid);
    } else {
      // 请求失败，data 是 wxErrorInfo 类型
      console.error(data.errcode, data.errmsg);
    }
  };
  // 更新姓名性别
  const deterName = async (wxInfo: wxInfo) => {
    console.log(wxInfo.openid, "openid");
    // 校验是否有openid和session_member_id
    if (!wxInfo.openid) {
      console.log("没有获取openid或没有校验登录");
      return;
    }
    const { nickname, sex, openid, headimgurl } = wxInfo;
    // 请求参数
    let myFormData = {
      ...formData,
      sex: sex == 0 ? 1 : 2,
      name: nickname,
      openid,
    };
    console.log(myFormData, "myFormData");
    // 渲染页面
    // 更新用户对象
    // 更新
    handleNameInputChange("name", nickname);
    handleNameInputChange("sex", sex == 0 ? 1 : 2);
    localStorage.setItem("img", headimgurl);
  };

  // 校验手机号
  const phoneValidator = (_, value, callback) => {
    if (value) {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // if (reg.test(value)) {
      //     handleNameInputChange("mobile", value);
      //     return callback();
      // }
      if (reg.test(value)) {
        handleNameInputChange("mobile", value);
        return Promise.resolve();
      }
      return Promise.reject(new Error("手机号无效"));
      // return Promise.reject(new Error("请输入11为数字手机号"));
    } else {
      return Promise.reject(new Error("手机号不得为空"));
    }
  };
  // 获取验证码
  // const handleSendCodeClick = async () => {
  //      console.log("sendCode", sendCode);

  //    if (sendCode) {
  //      // 如果处于冷却状态，什么也不做
  //      console.log("sendCode", sendCode);
  //      return;
  //    }
  //   // 在这里处理发送验证码的逻辑
  //   // 获取手机号的值
  //   const res = await ApiSendCaptcha(formData.mobile);
  //   // 后续布置阿里云
  //   setSendCode(true);
  //   // setCooldown(true);
  //   // 倒计时
  //   const timer = setInterval(() => {
  //     setNum((prevNum) => {
  //       if (prevNum === 1) {
  //         clearInterval(timer);
  //         setSendCode(false);
  //         // setCooldown(false); // 倒计时结束后重置冷却状态
  //         return num; // Reset the countdown
  //       }
  //       return prevNum - 1;
  //     });
  //   }, 1000);
  //   if (res.code == 0) {
  //     handleNameInputChange("captcha", res.data.code);
  //     Toast.show({ content: "已发送", icon: "success" });
  //   }
  //   // console.log("mobile:", formData.mobile);
  // };
  // 获取验证码
  const handleSendCodeClick = async () => {
    console.log("sendCode", sendCode);
    // 后续布置阿里云
    setSendCode(true);
    if (sendCode) {
      // 如果处于冷却状态，什么也不做
      console.log("sendCode", sendCode);
      return;
    }

    // 清除上一次的定时器
    clearInterval(timerRef.current as NodeJS.Timer);

    // 在这里处理发送验证码的逻辑
    // 获取手机号的值
    const res = await ApiSendCaptcha(formData.mobile);
    

    // 设置新的倒计时
    timerRef.current = setInterval(() => {
      setNum((prevNum) => {
        if (prevNum === 1) {
          clearInterval(timerRef.current as NodeJS.Timer);
          setSendCode(false);
          return num; // Reset the countdown
        }
        return prevNum - 1;
      });
    }, 1000);

    // 将新的定时器引用保存在 ref 中
    
    if (res.code == 0) {
      handleNameInputChange("captcha", res.data.code);
      Toast.show({ content: "已发送", icon: "success" });
    }
    // console.log("mobile:", formData.mobile);
  };

  // 在组件中添加 ref
  const timerRef = useRef<NodeJS.Timer | null>(null);

  // 在 useEffect 中清除上一次的定时器
  useEffect(() => {
    return () => {
      clearInterval(timerRef.current as NodeJS.Timer);
    };
  }, []);
  // 用于修改更新用户
  // 修改user对象属性值
  const handleFieldChange = <K extends keyof RootObject>(
    fieldName: K,
    value: RootObject[K]
  ) => {
    // console.log(fieldName, value);
    setFormData((prevData) => ({
      ...prevData,
      [fieldName]: value,
    }));
  };
  //  user对象里的属性名 属性值
  const handleNameInputChange = (
    type: keyof RootObject,
    value: RootObject[keyof RootObject]
  ) => {
    // console.log("type", type);
    handleFieldChange(type, value);
    // console.log("formData", formData);
  };

  // 确定注册手机
  const determine = async () => {
    // 校验
    // 请求后端注册
    // const params = { ...formData, openid: formData.mobile + UserToken.openid };
    // 是否有
    // 用于测试阶段
    // const phoneOpenid = formData.mobile + UserToken.openid;
    const phoneOpenid = UserToken.openid;
    const params = { ...formData, openid: phoneOpenid };
    console.log(params, "params");
    // console.log(myToken, "myToken");
    // 注册请求
    const res = await ApiRegister(params);
    if (res.code == 0) {
      //  手机号 存到仓库
      // dispatch(changeUser(formData));
      console.log(res.data, "注册");
      // 重新加密
      // handleUserTokenEncryption("encryptedUserToken", myToken);
      // 存注册的openid到仓库,用于后续获取会员信息
      dispatch(changeOpenid(phoneOpenid));
      handleUserTokenEncryption("phoneOpenid", {
        openid: phoneOpenid,
      });
      // access_token存本地
      handleUserTokenEncryption("encryptedUserToken", UserToken);
      // 本地存微信用户信息;
      // handleUserTokenEncryption("encryptedWxInfo", {
      //   ...WxInfo,
      //   openid: myOpenid,
      // });
      // 存用户信息用于校验，是否注册
      // handleUserTokenEncryption("encryptedUserInfo", params);
      // 跳转信息页
      // navigate("/index");
      navigate("/home");
    }
  };

  // useEffect(() => {
  //   if (!sendCode) {
  //     return;
  //   }

  //   const cooldownTimer = setTimeout(() => {
  //     setSendCode(false);
  //   }, 5000); // 设置冷却时间，单位毫秒

  //   // 清除定时器以防组件卸载
  //   return () => clearTimeout(cooldownTimer);
  // }, [sendCode]);

  useEffect(() => {
    // 获取用户信息
    getCode();
    // 检测是否注册过
  }, []);

  // 更新界面
  // 挂载页面
  useEffect(() => {
    form.setFieldsValue(formData);
  }, [formData, form]);

  // 失去焦点
  const handleMobileBlur = async (e) => {
    const value = e.target.value;
    console.log(value, e);
    try {
      await form.validateFields(["mobile"]);
    } catch (error) {
      // 在这里可以处理验证失败的逻辑，例如显示错误信息
      console.error("Validation failed:", error);
    }
  };

  return (
    <div>
      <Form
        initialValues={{ ...formData }}
        layout="horizontal"
        form={form}
        footer={
          <Button
            block
            type="submit"
            color="primary"
            size="large"
            shape="rounded"
            onClick={determine}
          >
            确认并领取会员
          </Button>
        }
      >
        <Form.Header>会员注册</Form.Header>
        <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
          <Input
            placeholder="请输入姓名"
            onChange={(value) => handleNameInputChange("name", value)}
          />
        </Form.Item>
        <Form.Item name="sex" label="性别" rules={[{ required: true }]}>
          <Radio.Group
            onChange={(value) => handleNameInputChange("sex", value)}
          >
            <Radio value={1} style={{ marginRight: "10px" }}>
              男
            </Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item>
        {/* <Form.Item
          name="mobile"
          label="手机号"
          rules={[{ validator: phoneValidator }]}
        >
          <Input
            placeholder="请输入手机号"
            onBlur={handleMobileBlur}
            onChange={(value) => handleNameInputChange("mobile", value)}
          />
        </Form.Item>
        <Form.Item
          name="captcha"
          label="验证码"
          extra={<a onClick={handleSendCodeClick}>获取验证码</a>}
        >
          <Input
            placeholder="请输入验证码"
            onChange={(value) => handleNameInputChange("captcha", value)}
          />
        </Form.Item> */}
        <Form.Item
          name="mobile"
          label="手机号"
          // rules={[{ required: true }]}
          rules={[{ validator: phoneValidator }]}
        >
          <Input
            placeholder="请输入手机号"
            onBlur={handleMobileBlur}
            onChange={(value) => handleNameInputChange("mobile", value)}
          />
        </Form.Item>
        <Form.Item
          name="captcha"
          label="验证码"
          extra={
            <>
              <a
                onClick={handleSendCodeClick}
                style={{ display: sendCode ? "none" : "inline-block" }}
              >
                获取验证码
              </a>
              <span style={{ display: sendCode ? "inline-block" : "none" }}>
                {num}s后可重发
              </span>
            </>
          }
          // rules={[{ required: true }]}
        >
          <Input
            placeholder="请输入验证码"
            onChange={(value) => handleNameInputChange("captcha", value)}
          />
        </Form.Item>
        <Form.Item name="plate_number" label="车牌号">
          <Input
            placeholder="请输入车牌号"
            onChange={(value) => handleNameInputChange("plate_number", value)}
          />
        </Form.Item>
      </Form>
    </div>
  );
}